<template>
    <div class="w750" :class="themes.themes">
        <div class="position-fixed w-100 left-0 top-0 bg-fff zindex-99">
            <!-- tabs栏 -->
            <van-tabs
                v-model="active"
                :swipe-threshold="5"
                :color="themes.color"
                :title-active-color="themes.color"
                @change="switchType"
                sticky
                :offset-top="0"
            >
                <van-tab :title="item.name" :name="item.grade" v-for="(item, index) in tabsList" :key="index"></van-tab>
            </van-tabs>
            <!-- 横向滚动条 -->
            <div class="py-1">
                <div class="d-flex font-12 px-1 overflow-x-scroll scroll-hidden">
                    <div
                        @click="selectLevel('')"
                        class="rounded-15 mr-1 flex-center"
                        style="padding: 6px 15px; flex: 0 0 auto; height: 30px"
                        :class="[params.grade === '' ? 'text-main border-c-main border ' : '']"
                        :style="{ background: params.grade === '' ? bg01 : '#f5f5f5' }"
                    >
                        <span>全部</span>
                    </div>
                    <div
                        @click="selectLevel(level.grade)"
                        v-for="level in paramsObj.shareSaleLevelList"
                        :key="level.grade"
                        class="rounded-15 mr-1 flex-center"
                        style="padding: 6px 15px; flex: 0 0 auto; height: 30px"
                        :class="[params.grade == level.grade ? 'text-main border-c-main border ' : '']"
                        :style="{ background: params.grade === level.grade ? bg01 : '#f5f5f5' }"
                    >
                        <span>{{ level.levelName }}</span>
                    </div>
                    <div
                        @click="selectLevel(0)"
                        class="rounded-15 mr-1 flex-center d-flex a-center"
                        style="padding: 6px 15px; flex: 0 0 auto; height: 30px"
                        :class="[params.grade === 0 ? 'text-main border-c-main border ' : '']"
                        :style="{ background: params.grade === 0 ? bg01 : '#f5f5f5' }"
                    >
                        <span>会员</span>
                        <span @click="getQuestion" class="iconfont iconquestion ml text-999" style="font-size: 12px"></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="p-1" style="margin-top: 95px">
            <div class="font-14 text-999">
                <p v-if="paramsObj.distributeType == 'HIERARCHICAL'">
                    {{ activeTabName }}累计{{ paramsObj.shareSaleCount || 0 }}个分享官，{{ paramsObj.ordinaryCustomerCount || 0 }}个会员
                </p>
                <p v-else>{{ activeTabName }}累计{{ paramsObj.shareSaleCount || 0 }}个分享官，{{ paramsObj.ordinaryCustomerCount || 0 }}个会员</p>
            </div>
            <div>
                <van-list
                    v-model="paging.loading"
                    :finished="paging.finished"
                    :finished-text="!paging.emptylist ? '没有更多了' : ''"
                    @load="onLoad"
                    :immediate-check="false"
                    :error.sync="paging.error"
                    error-text="请求失败，点击重新加载"
                    v-if="!paging.emptylist && !paging.error && !partLoading"
                >
                    <div class="px-2 py-15p bg-fff border-8 mt-1" v-for="(item, index) in orderArr" :key="index">
                        <div class="d-flex border-dotted-b border-c-e4 pb-3">
                            <div class="position-relative">
                                <div style="width: 50px; height: 50px">
                                    <img v-if="item.portraitPic" :src="$imgUrlHead + item.portraitPic" alt="" class="w-100 h-100 rounded-circle" />
                                    <img v-else src="@/assets/images/head-default.png" alt="" class="w-100 h-100 rounded-circle" />
                                </div>
                                <span
                                    class="font-12 position-absolute bg-333 text-fff rounded-20 left-0 text-center"
                                    style="padding: 3px 7px; bottom: -14px; width: 50px"
                                >
                                    {{ !item.customerFlag ? '分享官' : '会员' }}
                                </span>
                            </div>
                            <div class="flex-1 d-flex flex-column j-sa ml-1 font-14">
                                <span v-if="item.nickName">{{ item.nickName }}</span>
                                <span v-if="item.mobile">{{ item.mobile }}</span>
                            </div>
                            <div>
                                <span
                                    v-if="!item.customerFlag"
                                    class="border-c-main border font-12 rounded-2 text-main text-center"
                                    style="padding: 2px 3px"
                                >
                                    {{ item.gradeName || '默认等级' }}
                                </span>
                            </div>
                        </div>
                        <div class="grid-column3 font-12 mt-15p">
                            <div class="d-flex flex-column">
                                <span>已结算订单数</span>
                                <span class="mt text-999">{{ item.settledSubCount || 0 }}</span>
                            </div>
                            <div class="d-flex flex-column">
                                <span>相关订单金额</span>
                                <span class="mt text-999">￥{{ Money(item.subAmount)[0] }}.{{ Money(item.subAmount)[1] }}</span>
                            </div>
                            <div class="d-flex flex-column">
                                <span>贡献佣金</span>
                                <span class="mt text-999">
                                    ￥{{ Money(item.contributionCommissionAmount)[0] }}.{{ Money(item.contributionCommissionAmount)[1] }}
                                </span>
                            </div>
                        </div>
                    </div>
                </van-list>
            </div>
            <Noempty :pic="require('../../../assets/images/review.png')" :title="'暂时没有相关信息'" v-if="paging.emptylist || paging.error" />

            <!-- 局部加载组件 -->
            <part-loading v-model="partLoading" backgroundColor="#fff" height="400px" size="24px" :color="themes.color" />
        </div>
    </div>
</template>

<script>
import Noempty from 'components/Noempty/Noempty'
import PartLoading from '@/components/PartLoading/PartLoading'
import cash from 'utils/tool'
import { mapState } from 'vuex'
import { subordinateList, subordinateParam } from 'api/extensionApi'
import { Dialog } from 'vant'
import PageUtil from 'utils/PageUtil'
import { colorRgb } from '@/utils/utils'

const pageUtil = new PageUtil(subordinateList, {
    field: {
        list: 'orderArr'
    }
})

export default {
    components: {
        Noempty,
        PartLoading
    },
    data() {
        return {
            Money: cash, //价格转换
            orderArr: [], // 数据列表
            paging: {
                loading: false,
                finished: false,
                error: false, // 是否错误
                emptylist: false // 是否显示列表为空时的样式
            },
            active: 'ALL', // 当前的tab
            activeTabName: '全部', // 当前tab的名字
            paramsObj: {}, // tabs和等级对象
            partLoading: true, // 局部loading
            params: {
                teamModel: 'ALL', // 团队模式 ALL：全部 ，FIRST：一级，SECOND：二级，THIRD：三级 ，DIRECT_PUSH：直推 ，团队：INFINITE
                grade: '' // 分享等级 空：全部，0：客户，其他按对应等级传入
            }
        }
    },

    computed: {
        ...mapState(['themes', 'integralName']),
        tabsList() {
            // 层级
            if (this.paramsObj.distributeType == 'HIERARCHICAL') {
                let levelList = [
                    {
                        grade: 'ALL',
                        name: '全部'
                    },
                    {
                        grade: 'FIRST',
                        name: '一级'
                    },
                    {
                        grade: 'SECOND',
                        name: '二级'
                    },
                    {
                        grade: 'THIRD',
                        name: '三级'
                    }
                ]
                switch (this.paramsObj.distributeModel) {
                    case 'FIRST':
                        levelList = levelList.slice(0, 2)
                        levelList[1].name = '已分享'
                        break
                    case 'SECOND':
                        levelList = levelList.slice(0, 3)
                        break
                    case 'THIRD':
                        levelList = levelList.slice(0, 4)
                        break
                    default:
                        break
                }
                return levelList
            }
            // 无限级
            else {
                return [
                    {
                        grade: 'ALL',
                        name: '全部'
                    },
                    {
                        grade: 'DIRECT_PUSH',
                        name: '直推'
                    },
                    {
                        grade: 'INFINITE',
                        name: '团队'
                    }
                ]
            }
        },
        bg01() {
            return `rgba(${colorRgb(this.themes.color).r}, ${colorRgb(this.themes.color).g}, ${colorRgb(this.themes.color).b}, 0.1) !important`
        }
    },
    mounted() {
        this.getParams()
    },
    methods: {
        // 获取tab栏和统计数据
        getParams() {
            subordinateParam({
                grade: this.params.grade,
                teamModel: this.params.teamModel
            })
                .then((res) => {
                    if (!res.success) {
                        this.$toast(res.msg)
                        return
                    }
                    this.paramsObj = res.result
                    pageUtil.loadListByPage(this, this.params, {
                        complete: () => {
                            this.partLoading = false
                        }
                    })
                })
                .catch((err) => {
                })
        },

        // 加载更多
        onLoad() {
            pageUtil.loadListByPageMore()
        },

        // 切换tab
        switchType(name, title) {
            if (name == this.params.teamModel) {
                return
            }
            this.activeTabName = title
            this.partLoading = true
            this.$set(this.paging, 'emptylist', false)
            this.$set(this.params, 'curPageNO', 1)
            this.$set(this.params, 'teamModel', name)
            this.getParams()
        },

        // 选择等级
        selectLevel(levelId) {
            if (levelId === this.params.grade) {
                return
            }
            this.partLoading = true
            this.$set(this.paging, 'emptylist', false)
            this.$set(this.params, 'curPageNO', 1)
            this.$set(this.params, 'grade', levelId)
            this.getParams()
        },

        // 点击问号
        getQuestion() {
            Dialog.alert({
                message: `<div class="d-flex flex-column">
                    <div class="font-18">会员说明</div>
                    <p class="text-999 font-16 mt-1">“会员”代表普通用户，即非分享员</p>`,
                theme: 'default',
                confirmButtonText: '我知道了',
                confirmButtonColor: '#333',
                allowHtml: true
            }).then(() => {
                // on close
            })
        }
    }
}
</script>
